<script setup lang="ts">
import { ref } from 'vue'
import type { previewImgType, colsType, rowsType } from './type'

const imgList = ref<previewImgType[]>([
  { id: '1', path: './images/comp/casher/1.jpg' },
  { id: '2', path: './images/comp/casher/2.jpg' },
  { id: '3', path: './images/comp/casher/3.jpg' },
  { id: '4', path: './images/comp/casher/4.jpg' }
])

const apiCols: colsType[] = [
  { title: '参数', dataIndex: 'param', width: 200 },
  { title: '类型', dataIndex: 'type', width: 150 },
  { title: '默认值', dataIndex: 'default', width: 100 },
  { title: '必填', dataIndex: 'required', width: 80 },
  { title: '说明', dataIndex: 'statement', ellipsis: true }
]
const apiRows: rowsType[] = [
  {
    key: '1',
    param: 'parameters',
    statement: '各平台支付参数',
    type: 'Object',
    default: '{}',
    required: '是'
  }
]

const paramsCols: colsType[] = [
  { title: '参数', dataIndex: 'param', width: 200 },
  { title: '类型', dataIndex: 'type', width: 150 },
  { title: '平台说明', dataIndex: 'required', width: 120 },
  { title: '说明', dataIndex: 'statement', ellipsis: true }
]
const paramsRows: rowsType[] = [
  {
    key: '1',
    param: 'recordNo',
    type: 'string',
    required: '微信小程序',
    statement: '微信小程序支付单号'
  },
  {
    key: '2',
    param: 'appID',
    type: 'string',
    required: '微信小程序',
    statement: '微信平台AppId'
  },
  {
    key: '3',
    param: 'timestamp',
    type: 'string',
    required: '微信小程序',
    statement: '时间戳从1970年1月1日至今的秒数，即当前的时间'
  },
  {
    key: '4',
    param: 'noncestr',
    type: 'string',
    required: '微信小程序',
    statement: '随机字符串，长度为32个字符以下'
  },
  {
    key: '5',
    param: 'packageData',
    type: 'string',
    required: '微信小程序',
    statement: '统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx'
  },
  {
    key: '6',
    param: 'signType',
    type: 'string',
    required: '微信小程序',
    statement: '签名算法，应与后台下单时的值一致'
  },
  {
    key: '7',
    param: 'sign',
    type: 'string',
    required: '微信小程序',
    statement: '签名，具体签名方案,同paySign'
  },
  {
    key: '8',
    param: 'channelTradeNo',
    type: 'string',
    required: '支付宝小程序',
    statement: '支付宝交易号'
  }
]
</script>

<template>
  <main class="main-wrap" v-hl>
    <div class="dev-wrap">
      <div class="doc-wrap">
        <div class="doc-sub">1、组件简介</div>
        <div class="doc-text">
          <div class="text">1.1 所属项目 - 会员小程序</div>
        </div>
        <div class="doc-text">
          <div class="text">1.2 路径 - /components/uni-payment/uni-payment.vue</div>
        </div>
        <div class="doc-text">
          <div class="text">1.3 功能 - 支付拉起收银台</div>
        </div>
        <div class="doc-text">
          <div class="text">1.4 组件预览</div>
          <div class="image flex-h-sc">
            <a-image-preview-group>
              <div class="img" v-for="(item, inx) in imgList" :key="item.id">
                <a-image class="img" :width="100" :src="item.path" />
              </div>
            </a-image-preview-group>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">2、使用方法</div>
        <div class="doc-text">
          <div class="text">无需引入和注册可直接使用</div>
          <div class="text">
            <pre><code class="vue">&lt;uni-payment ref="payment" :parameters="payParams"&gt;&lt;/uni-payment&gt;</code></pre>
            <div class="text">父组件拉起收银台方法this.$refs.payment._makePay(...)</div>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">3、关联接口</div>
        <div class="doc-text">
          <div class="text">/netPay/CheckOrderAsync - 支付成功通知接口</div>
          <div class="text">/netPayNotice/OrderNoticeErrorAsync - 支付失败通知接口</div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">4、API</div>
        <div class="doc-tab">
          <div class="tab">
            <a-table
              :columns="apiCols"
              :data-source="apiRows"
              bordered
              :pagination="false"
              size="small"
            ></a-table>
          </div>
          <div class="text">注意：parameters包含了各端支付所需的字段，详情请参考以下文档</div>
          <div class="text">
            小程序端请参考 https://uniapp.dcloud.net.cn/api/plugins/payment.html
          </div>
          <div class="text">
            微信H5支付请参考 https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_1_4.shtml
          </div>
          <div class="text">
            支付宝H5支付请参考 http://myjsapi.alipay.com/jsapi/native/trade-pay.html
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">5、方法</div>
        <div class="doc-text">
          <div class="doc-sub">_makePay ( parameters:paramsType ) : void； paramsType字段：</div>
          <div class="doc-tab">
            <div class="tab">
              <a-table
                :columns="paramsCols"
                :data-source="paramsRows"
                bordered
                :pagination="false"
                size="small"
              ></a-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  padding: 24px;
  overflow-y: auto;
  background: #fff;
}
.dev-wrap {
  .dev-t1 {
    @include font(14px, 1.4, #333);
    font-weight: bold;
    margin-bottom: 15px;
  }
  .doc-wrap {
    padding-left: 5px;
    margin-bottom: 15px;
    &:last-of-type {
      margin-bottom: 0;
    }
    .doc-sub {
      @include font(13px, 1.4, #333);
      font-weight: bold;
      margin-bottom: 10px;
    }
    .doc-text,
    .doc-tab {
      @include font(13px, 1.4, #333);
      padding-left: 5px;
      margin-bottom: 10px;
      &:last-of-type {
        margin-bottom: 0;
      }
      .tab {
        margin-bottom: 10px;
      }
      .text {
        @include font(13px, 1.4, #333);
        margin-bottom: 8px;
        padding-left: 5px;
        &:last-of-type {
          margin-bottom: 0;
        }
        .text {
          @include font(13px, 1.4, #333);
          margin: 12px 0 6px 0;
        }
        pre {
          display: block;
          margin: 0 0 4px 0;
          code {
            display: block;
            padding: 10px;
            background: #282c34;
            color: #abb2bf;
          }
        }
      }
      .image {
        @include size(100%, 100%);
        .img {
          max-width: 150px;
          margin-right: 20px;
          &:last-of-type {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
